<template>
  <div class="Word">
    <div style="text-align: center;">
      <h3 style="margin: 20px;">演示：动态填充数据到Word模板生成PDF文件的效果</h3>
      <div style="width: 650px; margin: 0 auto; font-size: 14px;">
        <p style="text-align: left;">
          演示内容：<br />
          &nbsp;&nbsp;&nbsp;&nbsp;本示例演示了调用FileMaker对象在客户端动态生成Word文件并自动另存为PDF到服务器上，却不在线打开文件的功能，模拟了直接在服务器端填充数据到Word模板生成PDF文件的效果。
        </p>
        <p style="text-align: left;">
          操作说明：<br />
          &nbsp;&nbsp;&nbsp;&nbsp;1. 点击“生成PDF文件”按钮，执行动态填充数据到荣誉证书模板“template.doc”的程序，生成一份PDF格式的荣誉证书文件。<br />
          &nbsp;&nbsp;&nbsp;&nbsp;2. 生成完毕后，即可在“FileMakerPDF/doc”目录下看到生成的PDF文件：zhengshu.pdf。
        </p>
      </div>
      <input id="Button1" type="button" value="生成PDF文件" @click="ConvertFile()" :disabled="isButtonDiable" />
      <div ref="progressBarContainer" class="progressBarContainer">
        <div ref="progressBar" class="progressBar"></div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { filemakerctrl } from 'js-pageoffice'

export default {
  name: "Word",
  data() {
    return {
      titleText: '',
      isButtonDiable: false
    };
  },
  created: function () {
    return request({
      url: '/index',
      method: 'get',
    }).then(response => {
      this.titleText = response;
    });
  },
  methods: {
    ConvertFile() {
      this.isButtonDiable = true;
      // 设置用于保存文件的服务器端controller地址,该地址需从"/"开始，指向服务器端根目录
      /** 如果想要给SaveFilePage传递参数，建议使用new URLSearchParams方式，例如：
       * let saveFileUrl = "/FileMaker/save";
       * let paramValue = new URLSearchParams({id:1,name:"张三"});
       * filemakerctrl.SaveFilePage = `${saveFileUrl}?${paramValue.toString()}`;
       */
      filemakerctrl.SaveFilePage = "/FileMakerPDF/save";

      filemakerctrl.CallFileMaker({
        // url：指向服务器端FileMakerCtrl打开文件的controller地址，该地址需从"/"开始，指向服务器端根目录  
        url: "/FileMakerPDF/FileMakerPDF",
        success: (res) => { // res：获取服务器端fs.setCustomSaveResult设置的保存结果
          console.log(res);
          console.log("completed successfully.");
          this.setProgress(100);
          this.isButtonDiable = false;
        },
        progress: (pos) => {
          console.log("running " + pos + "%");
          this.setProgress(pos);
        },
        error: (msg) => {
          console.log("error occurred: " + msg);
          this.isButtonDiable = false;
        },
      });
    },
    setProgress(percent) {
      const progressBar = this.$refs.progressBar;
      progressBar.style.width = percent + "%";
      progressBar.innerText = percent + "%";
    }
  }
}
</script>

<style scoped>
h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

.progressBarContainer {
  width: 500px;
  background-color: #e0e0e0;
  border-radius: 5px;
  padding: 3px;
  margin: 10px auto;
}

.progressBar {
  height: 20px;
  width: 0%;
  background-color: #76b900;
  border-radius: 5px;
  text-align: center;
  line-height: 20px;
  /* 使文字垂直居中 */
  color: white;
}
</style>